<template>
    <div class="select">
        <div>
            <el-select v-model="value_one" :placeholder="title_one" clearable style="width: 120px; margin-right: 5px;"
                @change="selectOne">
                <el-option v-for="(item, index) in props.data_one" :key="index" :label="item.label"
                    :value="item.value" />
            </el-select>

            <el-select v-model="value_two" :placeholder="title_two" clearable style="width: 120px" @change="selectTwo">
                <el-option v-for="(item, index) in props.data_two" :key="index" :label="item.label"
                    :value="item.value" />
            </el-select>
        </div>
        <div>
            <el-input v-model="price.min" type="number" style="width: 70px" placeholder="min" />
            -
            <el-input v-model="price.max" type="number" style="width: 70px" placeholder="max" />

            <el-button style="margin-left: 5px" plain @click="searchPrice">确定</el-button>
            <el-button style="margin-left: 5px" plain @click="resetPrice">重置</el-button>
        </div>
        <el-select v-model="order" placeholder="价格排序" clearable style="width: 120px" @change="selectPrice">
            <el-option v-for="item in Price" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref } from 'vue';

import { ElNotification } from 'element-plus';
import { useTabStore } from '@/store/useTabStore.ts';
const tabStore = useTabStore();

const props = defineProps({
    type: String,
    title_one: String,
    title_two: String,
    data_one: Array,
    data_two: Array
})




const value_one = ref('');
const value_two = ref('');
const price = reactive({
    min: null,
    max: null
})
const order = ref(null);

const searchPrice = () => {
    const min = parseInt(price.min)
    const max = parseInt(price.max)
    //判断为空
    if (price.min === null && price.max === null) {
        ElNotification({
            title: "错误",
            message: "请输入完整的价格区间",
            type: "error",
        });
        return;
    } else if (min > max) {
        ElNotification({
            title: "错误",
            message: "最小值不能大于最大值",
            type: "error",
        });
        return;
    } else {
        tabStore.searchKey = {
            ...tabStore.searchKey,
            price: {
                min: price.min,
                max: price.max,
            },
        }
    }
}

const resetPrice = () => {
    price.min = null;
    price.max = null;
    tabStore.searchKey = {
        ...tabStore.searchKey,
        price: {
            min: null,
            max: null,
        }
    }
}


const selectOne = (val: string) => {
    value_one.value = val;
    const typeMappings = {
        'CPU': 'series',
        'GPU': 'code',
        '主板': 'cpu_slot',
        '固态硬盘': 'capacity',
        '内存': 'capacity',
        '硬盘': 'capacity'
    };
    const type = typeMappings[props.type] || '';
    tabStore.searchKey = {
        ...tabStore.searchKey,
        [type]: val
    };
};


const selectTwo = (val: string) => {
    value_two.value = val;

    const typeMappings = {
        'CPU': 'socket_type',
        'GPU': 'gpuCapacity',
        '主板': 'memory_type',
        '固态硬盘': 'interfaceType',
        '内存': 'type',
        '硬盘': 'interfaceType'
    };

    const type = typeMappings[props.type] || '';

    tabStore.searchKey = {
        ...tabStore.searchKey,
        [type]: val
    };
};


const selectPrice = (val: number) => {
    order.value = val;
    tabStore.searchKey = {
        ...tabStore.searchKey,
        order: val
    }
}


const Price = [
    {
        value: 1,
        label: "价格升序",
    },
    {
        value: -1,
        label: "价格降序",
    },

]
</script>

<style scoped lang="scss">
.select {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}
</style>